<template>
  <el-dialog class="pick-dialog" :title="title" :visible.sync="dialogVisible" @close="closeDialog" :close-on-click-modal="false" :show-close="showClose" append-to-body width="1000px">
    <div class="form-box">

      <div class="type-box flex">
        <el-radio-group :disabled="shopInfo.signContractState==2||shopInfo.signCorpContractState==2" size="big" v-model="tabIndex" style="margin-bottom: 30px;">
          <el-radio-button :label="2">个人</el-radio-button>
          <el-radio-button :label="3">企业</el-radio-button>
        </el-radio-group>
      </div>

      <el-form v-if="tabIndex==2" :model="ruleForm" ref="ruleForm" label-width="140px" :rules="rules" :inline="true" class="demo-ruleForm">
        <div class="tip" v-if="shopInfo.signContractState!=3">
          提示：签署合同前会进行实名校验，请输入你的真实信息，以免签署失败；确保姓名、身份证号、手机号三者实名一致。
        </div>
        <el-divider content-position="left">实名信息</el-divider>
        <el-form-item label="真实姓名:" prop="name">
          <el-input :disabled="shopInfo.signContractState==2||shopInfo.signContractState==3" v-model="ruleForm.name" placeholder="请输入真实姓名"></el-input>
        </el-form-item>
        <el-form-item label="身份证号:" prop="idCard">
          <el-input :disabled="shopInfo.signContractState==2||shopInfo.signContractState==3" v-model="ruleForm.idCard" placeholder="请输入身份证号"></el-input>
        </el-form-item>
        <el-form-item label="本人手机号:" prop="phone">
          <el-input :disabled="shopInfo.signContractState==2||shopInfo.signContractState==3" v-model="ruleForm.phone" placeholder="请输入实名一致的手机号"></el-input>
        </el-form-item>
        <el-form-item label="住所地址:" prop="address">
          <el-input type="textarea" style="width: 250px;" :disabled="shopInfo.signContractState==2||shopInfo.signContractState==3" v-model="ruleForm.address" placeholder="请输入你的居住地址，精确到门牌号"></el-input>
        </el-form-item>
        <!-- 通讯信息 -->
        <el-divider content-position="left">通讯信息</el-divider>
        <div class="tip" v-if="shopInfo.signContractState!=3">
          通讯信息用于接收向你邮寄的各类文件，请填写真实收件地址信息。
        </div>
        <el-form-item label="电子邮箱:" prop="songdaEmail">
          <el-input :disabled="shopInfo.signContractState==2||shopInfo.signContractState==3" v-model="ruleForm.songdaEmail" placeholder="请输入电子邮箱"></el-input>
        </el-form-item>
        <el-form-item label="联系电话:" prop="songdaPhone">
          <el-input :disabled="shopInfo.signContractState==2||shopInfo.signContractState==3" v-model="ruleForm.songdaPhone" placeholder="请输入收件联系电话"></el-input>
        </el-form-item>
        <el-form-item label="邮寄地址:" prop="songdaAddress">
          <el-input type="textarea" style="width: 250px;" :disabled="shopInfo.signContractState==2||shopInfo.signContractState==3" v-model="ruleForm.songdaAddress" placeholder="请输入收件地址，精确到门牌号"></el-input>
        </el-form-item>
        <el-form-item label="指定收件人:" prop="songdaName">
          <el-input :disabled="shopInfo.signContractState==2||shopInfo.signContractState==3" v-model="ruleForm.songdaName" placeholder="请输入收件人姓名"></el-input>
        </el-form-item>

        <!-- 个人认证状态 -->
        <div v-if="shopInfo.signContractState==2||shopInfo.signContractState==3">
          <!-- 1未签 2签署中 3已签 -->
          个人认证状态：
          <el-tag type="danger" v-if="shopInfo.signContractState==1">未认证</el-tag>
          <el-tag type="warning" v-if="shopInfo.signContractState==2">合同签署中</el-tag>
          <el-tag type="warning" v-if="shopInfo.signContractState==3">已认证</el-tag>

          <el-button @click="chexiaohtong" type="danger" plain style="margin-left: 10px;" v-if="shopInfo.signContractState==2">撤销合同</el-button>
          <el-button :loading="loading" v-if="shopInfo.signContractState==2" @click="showSureBtnFn" type="text">完成签署，点此刷新</el-button>
          <div style="margin-top: 10px;" class="tip" v-if="shopInfo.signContractState==2">如果签署过程由于信息有误造成无法通过实名认证，请撤销合同后重新填写信息进行签署。</div>
        </div>
      </el-form>
      <el-form v-if="tabIndex==3" :model="ruleForm2" ref="ruleForm2" label-width="140px" :rules="rules" :inline="true" class="demo-ruleForm">
        <div class="tip" v-if="shopInfo.signCorpContractState!=3">
          提示：签署合同前会进行实名校验，请输入你的真实信息，以免签署失败。

        </div>
        <el-divider content-position="left">认证信息</el-divider>
        <el-form-item label="企业名称:" prop="cropName">
          <el-input :disabled="shopInfo.signCorpContractState==2||shopInfo.signCorpContractState==3" v-model="ruleForm2.cropName" placeholder="请输入营业执照上的企业名称"></el-input>
        </el-form-item>
        <el-form-item label="统一社会信用代码:" prop="identNo">
          <el-input :disabled="shopInfo.signCorpContractState==2||shopInfo.signCorpContractState==3" v-model="ruleForm2.identNo" placeholder="请输入统一社会信用代码"></el-input>
        </el-form-item>
        <el-form-item label="法人姓名:" prop="name">
          <el-input :disabled="shopInfo.signCorpContractState==2||shopInfo.signCorpContractState==3" v-model="ruleForm2.name" placeholder="请输入法人姓名"></el-input>
        </el-form-item>
        <el-form-item label="法人身份证号:" prop="idCard">
          <el-input :disabled="shopInfo.signCorpContractState==2||shopInfo.signCorpContractState==3" v-model="ruleForm2.idCard" placeholder="请输入法人身份证号"></el-input>
        </el-form-item>
        <el-form-item label="手机号:" prop="phone">
          <el-input :disabled="shopInfo.signCorpContractState==2||shopInfo.signCorpContractState==3" v-model="ruleForm2.phone" placeholder="请输入联系人手机号"></el-input>
        </el-form-item>
        <el-form-item label="住所地址:" prop="address">
          <el-input type="textarea" style="width: 250px;" :disabled="shopInfo.signCorpContractState==2||shopInfo.signCorpContractState==3" v-model="ruleForm2.address" placeholder="请输入企业所在地，精确到门牌号"></el-input>
        </el-form-item>
        <!-- 通讯信息 -->
        <el-divider content-position="left">通讯信息</el-divider>
        <div class="tip" v-if="shopInfo.signCorpContractState!=3">
          通讯信息用于接收向你邮寄的各类文件，请填写真实收件地址信息。
        </div>
        <el-form-item label="电子邮箱:" prop="songdaEmail">
          <el-input :disabled="shopInfo.signCorpContractState==2||shopInfo.signCorpContractState==3" v-model="ruleForm2.songdaEmail" placeholder="请输入电子邮箱"></el-input>
        </el-form-item>
        <el-form-item label="联系电话:" prop="songdaPhone">
          <el-input :disabled="shopInfo.signCorpContractState==2||shopInfo.signCorpContractState==3" v-model="ruleForm2.songdaPhone" placeholder="请输入收件联系电话"></el-input>
        </el-form-item>
        <el-form-item label="邮寄地址:" prop="songdaAddress">
          <el-input type="textarea" style="width: 250px;" :disabled="shopInfo.signCorpContractState==2||shopInfo.signCorpContractState==3" v-model="ruleForm2.songdaAddress" placeholder="请输入收件地址，精确到门牌号"></el-input>
        </el-form-item>
        <el-form-item label="指定收件人:" prop="songdaName">
          <el-input :disabled="shopInfo.signCorpContractState==2||shopInfo.signCorpContractState==3" v-model="ruleForm2.songdaName" placeholder="请输入收件人姓名"></el-input>
        </el-form-item>
        <!-- 企业认证状态 -->
        <div v-if="shopInfo.signCorpContractState==2||shopInfo.signCorpContractState==3">
          <!-- 1未签 2签署中 3已签 -->
          企业认证状态：
          <el-tag type="danger" v-if="shopInfo.signCorpContractState==1">未认证</el-tag>
          <el-tag type="warning" v-if="shopInfo.signCorpContractState==2">合同签署中</el-tag>
          <el-tag type="warning" v-if="shopInfo.signCorpContractState==3">已认证</el-tag>

          <el-button @click="chexiaohtong" type="danger" plain style="margin-left: 10px;" v-if="shopInfo.signCorpContractState==2">撤销合同</el-button>
          <el-button :loading="loading" v-if="shopInfo.signCorpContractState==2" @click="showSureBtnFn" type="text">完成签署，点此刷新</el-button>
          <div style="margin-top: 10px;" class="tip" v-if="shopInfo.signCorpContractState==2">如果签署过程由于信息有误造成无法通过实名认证，请撤销合同后重新填写信息进行签署。</div>
        </div>
      </el-form>
      <div class="center" v-if="((shopInfo.signCorpContractState==2||shopInfo.signCorpContractState==1)||(shopInfo.signContractState==1||shopInfo.signContractState==2))">
        <!-- <el-button @click="close('ruleForm')">取消</el-button> -->
        <el-button v-if="(tabIndex==2&& shopInfo.signContractState==1)||(tabIndex==3&&shopInfo.signCorpContractState==1)" type="primary" @click="submitForm(tabIndex==2?'ruleForm':'ruleForm2')" :loading="loading">开始签署合同</el-button>
        <el-button v-if="(tabIndex==2&& shopInfo.signContractState==2)||(tabIndex==3&&shopInfo.signCorpContractState==2)" type="primary" @click="submitForm(tabIndex==2?'ruleForm':'ruleForm2')" :loading="loading">继续签署</el-button>
      </div>

      <el-dialog
        title="合同签署中..."
        :visible.sync="contractSureDialog"
        append-to-body
        width="500px"
        :before-close="handleClose">
        <div class="center">
         合同签署中,<el-button  @click="closeSureStatus" type="text">完成签署，点此刷新</el-button>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeSureStatus">取 消</el-button>
          <el-button type="primary" @click="closeSureStatus">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </el-dialog>
</template>

<script>
import { mapGetters } from "vuex";
import fadadaApi from "../../../../api/B2Cmanage/fadada";
export default {
  name: "",
  props: {
    title: {
      type: String,
      default: "实名认证"
    },
    showClose: {
      type: Boolean,
      default: true
    },
    from: String
  },
  data() {
    var idNumberRule = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入身份证号"));
      } else if (!this.idCardReg.test(value)) {
        callback(new Error("请输入正确的身份证号"));
      } else {
        callback();
      }
    };
    var phoneRule = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入手机号"));
      } else if (!this.phoneReg.test(value)) {
        callback(new Error("请输入正确的手机号"));
      } else {
        callback();
      }
    };
    return {
      contractSureDialog:false,
      dialogVisible: false,
      loading: false,
      tabIndex: 2,
      // 个人认证信息
      ruleForm: {
        name: "",
        idCard: "",
        phone: "",
        address: "",

        songdaAddress: "",
        songdaEmail: "",
        songdaName: "",
        songdaPhone: "",
      },
      // 企业认证信息
      ruleForm2: {
        name: "",
        idCard: "",
        phone: "",
        cropName: "",
        identNo: "",
        address: "",

        songdaAddress: "",
        songdaEmail: "",
        songdaName: "",
        songdaPhone: "",
      },
      rules: {
        name: [{ required: true, message: "请输入", trigger: "change" }],
        idCard: [
          { required: true, message: "请输入", trigger: "change" },
          { validator: idNumberRule, trigger: "change" },
        ],
        phone: [
          { required: true, message: "请输入", trigger: "change" },
          { validator: phoneRule, trigger: "change" },
        ],
        cropName: [{ required: true, message: "请输入", trigger: "change" }],
        identNo: [{ required: true, message: "请输入", trigger: "change" }],
        address: [{ required: true, message: "请输入", trigger: "change" }],
        songdaAddress: [
          { required: true, message: "请输入", trigger: "change" },
        ],
        songdaEmail: [{ required: true, message: "请输入", trigger: "change" }],
        songdaName: [{ required: true, message: "请输入", trigger: "change" }],
        songdaPhone: [
          { required: true, message: "请输入", trigger: "change" },
          { validator: phoneRule, trigger: "change" },
        ],
      },

      flag: "",
      showSureBtn: false,
    };
  },
  computed: {
    ...mapGetters(["userInfo", "shopInfo"]),
  },
  created() {},
  methods: {
    async open(flag) {
      this.$store.dispatch("getShopInfo");
      this.loading = false;
      this.showSureBtn = false;
      this.flag = "";
      if (flag) {
        this.flag = flag;
      }
      setTimeout(() => {
        if(this.shopInfo) {
        if (this.shopInfo.personInfo) {
          const personInfo = JSON.parse(this.shopInfo.personInfo);
          this.ruleForm = {
            phone: personInfo.phone || "",
            idCard: personInfo.idCard || "",
            name: personInfo.name || "",
            address: personInfo.address || "",

            songdaAddress: personInfo.songdaAddress || "",
            songdaEmail: personInfo.songdaEmail || "",
            songdaName: personInfo.songdaName || "",
            songdaPhone: personInfo.songdaPhone || "",
          };
        }

        if (this.shopInfo.corpInfo) {
          const corpInfo = JSON.parse(this.shopInfo.corpInfo);
          this.ruleForm2 = {
            phone: corpInfo.phone || "",
            idCard: corpInfo.idCard || "",
            name: corpInfo.name || "",
            cropName: corpInfo.cropName || "",
            identNo: corpInfo.identNo || "",
            address: corpInfo.address || "",

            songdaAddress: corpInfo.songdaAddress || "",
            songdaEmail: corpInfo.songdaEmail || "",
            songdaName: corpInfo.songdaName || "",
            songdaPhone: corpInfo.songdaPhone || "",
          };
        }

        if (
          this.shopInfo.signCorpContractState == 2 ||
          this.shopInfo.signCorpContractState == 3
        ) {
          this.tabIndex = 3;
          if(this.shopInfo.signContractState == 2){
            this.tabIndex = 2;
          }
        } else {
          this.tabIndex = 2;
        }
          }
      }, 300);
      
      this.dialogVisible = true;
    },
    // 关闭
    closeSureStatus(){
      this.showSureBtnFn()
      this.contractSureDialog = false
      
    },
    // 关闭确认弹出
    handleClose(done){
      this.showSureBtnFn()
      done()
    },
    // 刷新店铺信息
    showSureBtnFn() {
      this.loading = true;
      fadadaApi
        .getcontractInfoById(
          this.tabIndex == 2
            ? this.shopInfo.signContractId
            : this.shopInfo.signCorpContractId
        )
        .then((res) => {
          if(!this.showClose){
            //从限制功能页面进来的 签署完成后 自动关闭弹窗 并提示认证成功
            const authTypes=[2,3,6]
            if(res.data&&authTypes.includes(res.data.authType)){
              this.$message.success('实名认证成功！')
              this.dialogVisible = false;
              this.$router.replace({
                path:'/index'
              })
            }
          }
         
          this.loading = false;
          this.$store.dispatch("getShopInfo");
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    chexiaohtong() {
      this.$confirm("撤销后需要重新填写资料进行签署，确定撤销吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.loading = true;

          // const authPhone= this.tabIndex==2?this.ruleForm.phone:this.ruleForm2.phone
          fadadaApi
            .contractcancel({
              id:
                this.tabIndex == 2
                  ? this.shopInfo.signContractId
                  : this.shopInfo.signCorpContractId,
            })
            .then((res) => {
              if (res.code == 200) {
                this.$message.success("合同撤销成功！");
              }
              this.$store.dispatch("getShopInfo");
              this.loading = false;
            })
            .catch((err) => {
              this.$store.dispatch("getShopInfo");
              this.loading = false;
            });
        })
        .catch(() => {});
    },

    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.loading = true;
          let formData = {};
          if (this.tabIndex == 2) {
            // 个人认证
            formData = {
              authType: 2,
              personInfo: JSON.stringify(this.ruleForm),
            };
          } else if (this.tabIndex == 3) {
            // 企业认证
            formData = {
              authType: 3,
              corpInfo: JSON.stringify(this.ruleForm2),
            };
          }
          try {
            const res = await fadadaApi.dpzrsign(formData);
            this.$store.dispatch("getShopInfo");
            if (res.code == 200 && res.data.signUser) {
              const temp = JSON.parse(res.data.signUser);
              if (temp[0] && temp[0].signUrl) {
                this.contractSureDialog = true
                window.open(temp[0].signUrl);
              }
            }
          } catch (error) {}
          this.loading = false;
        } else {
          //console.log("error submit!!");
          return false;
        }
      });
    },
    closeDialog() {
      this.$emit('close')
    },
  },
};
</script>
<style scoped lang="scss">
.tip {
  color: red;
  margin-bottom: 10px;
}
.type-box {
  justify-content: center;
}
</style>
